<template>
    <div class="block">
        <el-row>
            <el-form style="border:1px lightgray dotted;margin:0px 20px;padding:10px;" size="mini" >
                <el-form-item label="港通最新持股">
                    <el-select v-model="GTInfo.market" style="width:100px">
                        <el-option value="sh" label="沪市"></el-option>
                        <el-option value="sz" label="深市"></el-option>
                    </el-select>
                    名称: <el-input style="width:120px" v-model="GTInfo.name" clearable/>
                    <el-button type="primary" class="ml20" @click="queryGTInfo">查询</el-button>
                    <el-link  class="ml20" type="primary" target="_blank" href="https://www.hkexnews.hk/sdw/search/mutualmarket_c.aspx?t=sh">查询地址</el-link>
                    <span>(一般每日00:30更新)</span>
                </el-form-item>
                <el-form-item label="查询结果:" class="red">{{GTInfo.info}}</el-form-item>
            </el-form>
        </el-row>
    </div>
</template>


<script>
import config from '~/config'
import dayjs from '~/plugins/day';

import datadict from '~/plugins/dict';

export default {
    data() {
        return {
            tableheight: null,
            GTInfo:{
                name: "浪潮",
                market: "sh",
                info : "",
            }
        }
    },
     

    mounted() {
        // this.preQuery();
    },

    methods: {
        queryGTInfo() {
            if(!this.GTInfo.name){
                this.$message.error("关键字必填");
                return;
            }
            this.info = {};
            this.$axios.get(`${config.sapi}/api/stock/getLastGTRate?name=${this.GTInfo.name}&market=${this.GTInfo.market}`)
            .then((res) => {
                if (res.data.code == 200) {
                    this.GTInfo.info = res.data.data;
                } else {
                    this.$message.error(res.data.message);
                }
            })

        }
    }
}
</script>

<style lang="less" scoped>
.flexdiv {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    button{
        margin-left: 10px;
    }
}
.ml20 {
    margin-left: 20px;
}

.qryform{
    margin-bottom:10px;
    button{
        margin-top:0px;
        vertical-align: middle;
    }
}
.order-class{
    display: inline-block;
    margin-right: 10px;
    min-width: 50px;
}

.red{
    color: red;
}
.green{
    color: green;
}
.yellow{
    color: rgb(96, 22, 233)
}
.link-item{
    font-size: 12px;
}

</style>
